<template>
    <div id="equipment">
<!--        导航栏-->
        <div class="hang">
            <el-row :gutter="-1" class="row_1">
                <el-col :span="6" class="col_1">
                    <span>设备型号</span>
                    <el-input v-model="equipmentSearch.xinh" placeholder="请输入设备型号" clearable style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="5" class="col_2">
                    <span>客户公司</span>
                    <el-input v-model="equipmentSearch.work" placeholder="请输入设备型号" clearable style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="7" class="col_3">
                    <span>设备机身号</span>
                    <el-input v-model="equipmentSearch.id" placeholder="请输入设备机身号号" clearable style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="5" class="col_4">
                    <el-button type="primary">筛选</el-button>
                </el-col>
            </el-row>

            <el-row class="row_2">
                <el-col :span="5" class="_col_1">
                    <el-button type="primary">批量下载二维码数据</el-button>
                </el-col>
                <el-col :span="5" class="_col_2">
                    <el-button type="success">添加设备</el-button>
                </el-col>
            </el-row>
        </div>
<!--        表格栏目-->
        <el-table
                :data="equipmentData"
                style="width: 100%"
                stripe
        >
            <el-table-column
                    prop="id"
                    label="设备ID"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="设备型号" align="center">
            </el-table-column>
            <el-table-column
                    prop="configure"
                    label="设备配置" align="center">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="设备机身号" align="center">
            </el-table-column>
            <el-table-column label="是否录入" align="center">
                <template v-slot="slot">
                    <el-tag type="success" v-if="slot.row.status">已录入</el-tag>
                    <el-tag type="danger" v-else>未录入</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="user_dep"
                    label="客户公司" align="center">
            </el-table-column>
            <el-table-column label="操作" width="400" align="center">
                <template v-slot="slot">
                    <el-button type="primary" size="mini" plain>查看工单</el-button>
                    <el-button type="primary" size="mini" plain>查看详情</el-button>
                    <el-button type="success" size="mini" plain>修改设备</el-button>
                    <el-button type="danger" size="mini" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--分页  -->
        <el-pagination
                @size-change="handleSizeEquipment"
                @current-change="handleCurrentEquipment"
                :current-page.sync="equipmentQueryInfo.page"
                :page-size="equipmentQueryInfo.limit"
                layout="total, prev, pager, next"
                :total="datails"
                background>
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "equipment",
        created() {
            this.getEquipmentData();
        },
        data(){
            return{
                equipmentSearch:{
                    xinh:'',
                    work:'',
                    id:''
                },
                equipmentData:[],
                equipmentQueryInfo:{
                    action:'',
                    page:1,
                    limit:5,
                },
                datails:0,
            }
        },
        methods:{
            async getEquipmentData(){
                const{data:res}=await this.$http.get("equipment",{params:this.equipmentQueryInfo});
                // console.log(res);
                if(res.code!==1){
                    return this.$message.error("获取数据失败");
                }else {
                    this.equipmentData=res.result.data;
                    this.datails=res.result.limitCount
                }
            },
            handleSizeEquipment(newpage){
                this.equipmentQueryInfo.limit=newpage;
                this.getEquipmentData();
            },
            handleCurrentEquipment(newNum){
                this.equipmentQueryInfo.page=newNum;
                this.getEquipmentData();
            }
        },

    }
</script>

<style lang="less" scoped>
    .hang {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        position: relative;
        span{
            margin-right: 15px;
        }
        .col_1 {
            margin: 15px 0 15px 20px;
            span {
                font-size: 13px;
            }
        }
        .col_2 {
            .col_1();
            margin-left: -50px;
            margin-right: 0;
        }
        .col_3{
            .col_2();
            margin-left: 10px;
        }
        .col_4{
            .col_3();
            margin-left: -100px;
        }
    }
    .row_2{
        margin-left: 16px;
        margin-bottom: 15px;
        ._col_2{
            margin-left: -90px;
        }

    }
    .el-button{
        font-size: 12px;
    }
    .el-table{
        padding-left: 12px;
    }
    .el-pagination{
        text-align: center;
        margin-top: 10px;
    }
</style>
